<template>
    <div>
      <div class="top">
        <span class="news"><van-icon name="chat-o" size="25px" /></span>
        <span class="set"><van-icon name="setting-o" size="25px" /></span>
      </div>
      <div class="information">
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://static.asus.com.cn/static/wap/newPages/images/avatar.png"
        />
        <span @click="fun1">登录 / <span @click="fun2">注册</span> ></span>
      </div>
      <div class="box1">
        <div class="box2">华硕会员</div>
        <div class="box3">注册领888礼包及2000积分</div>
      </div>
      <van-nav-bar left-text="我的订单" right-text="全部订单 >" />
      <van-grid :column-num="5">
        <van-grid-item icon="balance-o" text="待付款" />
        <van-grid-item icon="send-gift-o" text="待发货" />
        <van-grid-item icon="logistics" text="已发货" />
        <van-grid-item icon="comment-o" text="待评价" />
        <van-grid-item icon="balance-list-o" text="退货/售后" />
      </van-grid>
      <el-carousel indicator-position="outside" height="150px">
        <el-carousel-item v-for="(v, index) in arr" :key="index">
          <img :src="v" class="img" />
        </el-carousel-item>
      </el-carousel>
      <van-nav-bar
        left-text="我的服务"
      />
        <van-grid :column-num="4">
        <van-grid-item icon="like-o" text="我的收藏" />
        <van-grid-item icon="todo-list-o" text="我的预约" />
        <van-grid-item icon="point-gift-o" text="我的活动" />
        <van-grid-item icon="fire-o" text="网点查询" />
        <van-grid-item icon="points" text="A码兑换" />
      </van-grid>
      <van-tabbar :placeholder=true v-model="active">
        <van-tabbar-item @click="fun" icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item :to="'/classify'" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item icon="browsing-history-o">发现</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script>
  import Vue from "vue";
  import { Icon } from "vant";
  Vue.use(Icon);
  
  import { NavBar } from "vant";
  Vue.use(NavBar);
  
  import { Tabbar, TabbarItem } from "vant";
  Vue.use(Tabbar);
  Vue.use(TabbarItem);
  
  import { Swipe, SwipeItem } from "vant";
  Vue.use(Swipe);
  Vue.use(SwipeItem);
  
  export default {
    data() {
      return {
        arr: [
          " https://static.asus.com.cn/store/20230201/15391955524952.jpg",
          "https://static.asus.com.cn/store/20230202/11222549101515.jpg",
        ],
        active:4
      };
    },
    methods:{
      fun(){
        this.$router.push('/homepage').catch(err=>{})
      },
      fun1(){
        this.$router.push('/login').catch(err=>{})
      },
      fun2(){
        this.$router.push('/adminn').catch(err=>{})
      }

    }
  };
  </script>
  
  <style scoped>
  .top {
    display: flex;
  }
  .news {
    display: block;
    margin-top: 10px;
    margin-left: 280px;
  }
  .set {
    display: block;
    margin-top: 10px;
    margin-left: 30px;
  }
  .information {
    height: 100px;
    line-height: 50px;
  }
  .box1 {
    width: 340px;
    height: 80px;
    background-color: blueviolet;
    margin-left: 15px;
    border-radius: 10px 10px 0 0;
  }
  .box2 {
    width: 100px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
    line-height: 30px;
    border-top: 1px solid transparent;
    font-weight: 600;
    color: blanchedalmond;
  }
  .box3 {
    width: 300px;
    height: 30px;
    color: white;
    margin-left: 25px;
    margin-top: 15px;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  img {
    height: 100%;
    width: 100%;
  }
  </style>